<template>
  <div class="container">
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>学生管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

      <div class="query">
        <el-input v-model="queryParams.sname" style="display: inline-block;width:200px;" placeholder="请输入学生姓名"></el-input>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button type="primary" @click="handleAdd">添加</el-button>
      </div>


    <div>
      <el-dialog
          :title="title"
          :visible.sync="open"
          width="60%"
          center>

        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="学号">
            <el-input v-model="form.sno"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="form.sname"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="form.sex" placeholder="请选择性别">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机">
            <el-input v-model="form.phoe"></el-input>
          </el-form-item>
          <el-form-item label="宿舍号">
            <el-input v-model="form.dorm"></el-input>
          </el-form-item>
          <el-form-item label="头像">
            <el-upload
                action="http://localhost:9000/students/upload"
                list-type="picture-card"
                :file-list="filelist"
                :on-success="handleSuccess">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <div class="table">
      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            prop="sno"
            label="学号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="sname"
            label="姓名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="phoe"
            label="手机号">
        </el-table-column>
        <el-table-column
            prop="dorm"
            label="宿舍号">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别">
        </el-table-column>
        <el-table-column
            prop="avatar"
            label="头像">
          <template slot-scope="scope">
            <img :src="imgurl+scope.row.avatar" alt="" style="width: 50px;height: 50px;"></img>
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            width="200">
          <template slot-scope="scope">
            <el-button @click="handleUpdate(scope.row)" type="warning" size="small">编辑</el-button>
            <el-button type="danger" @click="handleDelete(scope.row.id)"  size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
export default {
  name: "Students",
  data() {
    return {
      imgurl:'http://localhost:9000/img/',
      filelist:[],
      title:'',
      open:false,
      dialogImageUrl: '',
      dialogVisible: false,
      queryParams:{
        sname:undefined
      },
      form: {
        id:'',
        sno:'',
        sname:'',
        sex:'',
        phoe:'',
        dorm:'',
        avatar:''
      },
      tableData: [{
        id:1,
        sno: '2099232',
        sname: '小名',
        phoe: '13922112221',
        dorm: '2-701',
        sex: '女',
        avatar: 'https://q0.itc.cn/q_70/images03/20240416/dff13b0621f0410da8d87e09850d4deb.jpeg'
      }, {
        id:2,
        sno: '2099211',
        sname: '王小虎',
        phoe: '13900001111',
        dorm: '2-102',
        sex: '男',
        avatar: 'https://q0.itc.cn/q_70/images03/20240416/cdd391ba787049009b7fc4fdd893e9cc.jpeg'
      }]
    }
  },
  methods:{
    resetForm(){
      this.form.sex=undefined;
      this.form.phoe=undefined;
      this.form.dorm=undefined;
      this.form.sname=undefined;
      this.form.sno=undefined;
      this.form.id=undefined;
      this.form.avatar=undefined;
    },
    fillForm(row){
      this.form.sex=row.sex;
      this.form.phoe=row.phoe;
      this.form.dorm=row.dorm;
      this.form.sname=row.sname;
      this.form.sno=row.sno;
      this.form.id=row.id;
      this.form.avatar=row.avatar;
      this.filelist=[];
      this.filelist.push({
        url:this.imgurl+row.avatar
      })
    },

    getList(){
      this.axios.get('http://localhost:9000/students/queryall')
          .then(res=>{
            console.log(res)
            this.tableData=res.data;
          })
    },
    handleQuery(){
      this.axios.get('http://localhost:9000/students/querylike?sname='+this.queryParams.sname)
          .then(res=>{
            this.tableData=res.data;
          })
    },
    handleAdd() {
      this.open=true;
      this.title='添加';
    },
    handleUpdate(row) {
      console.log(row)
      this.fillForm(row);
      this.title='编辑';
      this.open=true;
    },
    handleDelete(id) {

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.post('http://localhost:9000/students/delete?id='+id).then(res=>{
          this.getList();
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    handleSuccess(response, file, fileList){
      console.log("file",response)
      this.form.avatar=response
    },
    onSubmit() {
      let targeturl = '';
      if(this.form.id){
        targeturl = 'http://localhost:9000/students/update'
      }else {
        targeturl = 'http://localhost:9000/students/create'
      }
      this.axios.post(targeturl,this.form)
          .then(res=>{
            this.open=false;
            this.resetForm();
            this.getList();
            this.$message({
              message: '操作成功',
              type: 'success'
            })
          })
    }
  },
  created() {
    this.getList();
  }
}
</script>

<style scoped>

.query {
  padding-left: 10px;
}
.table{
  margin-top: 20px;
}
</style>
